<template>
    <div>
      <h1>商品详情</h1>
      <div v-if="product">
        <p><strong>商品名称:</strong> {{ product.name }}</p>
        <p><strong>上架时间:</strong> {{ product.date }}</p>
        <p><strong>商品价格:</strong> {{ product.price }}</p>
        <p><strong>商品折扣:</strong> {{ product.discount * 100 }}%</p>
        <!-- 其他商品详细信息 -->
      </div>
      <div v-else>
        <p>商品数据加载失败</p>
      </div>
    </div>
  </template>
  
  <script>
  import axios from "axios";
  export default {
    props: ['id'],  // 接收路由传递的 id 参数
    data() {
      return {
        product: null,  // 存储商品数据
      };
    },
    mounted() {
      // 根据 id 获取商品详情
      this.fetchProductDetails(this.id);
    },
    methods: {
      fetchProductDetails(id) {
        // 假设我们通过 API 请求获取商品的详细信息
        axios
          .get(`http://localhost:8080/products/${id}`)
          .then((response) => {
            this.product = response.data;  // 更新商品数据
          })
          .catch((error) => {
            console.error('获取商品详情失败:', error);
          });
      },
    },
  };
  </script>
  
  <style scoped>
  /* 样式 */
  h1 {
    font-size: 24px;
    margin-bottom: 20px;
  }
  p {
    font-size: 18px;
    margin: 10px 0;
  }
  </style>
  